<template>
  <div class="card_list">
  <div class="task_name">
      <div style="width: 50%;">模板名称：<el-input size="small" v-model="template_name" :disabled="!routerParams.isEdit"></el-input></div>
      <div>
        <span class="task_name_btn_cancel" @click="back">返回</span>
        <span class="task_name_btn_save" @click="updateName" v-if="routerParams.isEdit">保存</span>
      </div>
    </div>
    <div :class="isNoData ?'no_task_content':'has_task_content'">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="任务" name="task">
          <span slot="label">任务<i class="el-icon-caret-bottom"></i></span>
          <template v-if="isNoData">
            <div class="no_card">
              <img src="@/assets/images/card.png" alt="">
              <div class="illustrate">这个项目还没有任何内容，<br>赶紧创建第一个阶段吧！</div>
              <el-button size="mini" type="primary" @click="toNewCard">新建卡片</el-button>
            </div>
            <div class="new_card" v-if="isShowNewCard">
              <div class="new_header">新建卡片
                <span @click="closeCard"><i class="el-icon-close"></i></span>
              </div>
              <div class="new_content">
                <div class="card_title">卡片名称</div>
                <el-input placeholder="请输入内容" size="small" v-model="card_name"></el-input>
                <el-button size="mini" type="primary" class="card_btn" @click="toCreateCard">确定</el-button>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="has_card">
              <div v-for="(item,index) in cardData" :key="index" :class="[item.isAddTask ? 'one-card-add' :'','one-card']">
                <div class="card_header">
                  <template v-if="!item.isEdit">
                    <div class="card_name">{{item.card_name}}</div>
                    <div class="card_icon">
                      <!-- <span style="padding-right:10px;"><i class="el-icon-plus"></i></span> -->
                      <span>    
                        <el-dropdown size="small">
                          <span class="el-dropdown-link">
                            ···
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="editCard(item)">编辑</el-dropdown-item>
                            <el-dropdown-item @click.native="deleteCard(item)">删除</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </span>
                    </div>
                  </template>
                  <template v-else>
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      style="width: 80%"
                      v-model="newCardName"
                    ></el-input>
                    <span style="width: 15%">
                      <i class="el-icon-check" style="cursor: pointer" @click="confirmName(item)"></i>
                      <i class="el-icon-close" style="cursor: pointer" @click="cancelName(item)"></i>
                    </span>
                  </template>
                </div>
                <template v-if="item.isAddTask">
                  <div class="addTaskContent">
                    <el-input
                      placeholder="请输入任务名称"
                      size="small"
                      v-model="subjectName"
                    ></el-input>
                    <el-input
                      placeholder="请输入任务描述"
                      size="small"
                      :rows="2"
                      type="textarea"
                      v-model="description"
                    ></el-input>
                    <div class="user" @click="selectUser" v-if="routerParams.project_id">
                      <i class="el-icon-user"></i>
                      <template v-if="selectedUsersList.length > 0 ">
                        <span class="avatar">{{selectedUsersList[0].name.substring(selectedUsersList[0].name.length-2,selectedUsersList[0].name.length)}}</span>
                        <span class="chargePerson" :title="selectedUsersList[0].name">{{selectedUsersList[0].name}}</span>
                      </template>
                    </div>
                    <div class="user">
                      <i class="fa fa-user-o" aria-hidden="true"></i><span style="color:#606266" :title="user.name">{{user.name}}</span>
                    </div>
                    <div class="card_bottom">
                      <!-- <div style="color:#409EFF;font-weight: 600;">更多</div> -->
                      <div>
                        <el-button size="mini" @click="closeAddTask(item)">取消</el-button>
                        <el-button size="mini" type="primary" class="creatBtn" @click="toCreateCardTask(item)">创建</el-button>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="every_task_content" v-for="(el,inx) in item.taskList" :key="inx">
                    <div class="content_left">
                      <el-checkbox 
                      ></el-checkbox>
                    </div>
                    <div class="content_right">
                      <div class="task_title task">{{el.subject}}</div>
                      <div class="task_first">
                        <span class="delay" v-if="el.overdueDay && el.overdueDay != 0"><i class="el-icon-date"></i>延期{{el.overdueDay}}天</span>
                        <span class="progress" v-if="el.progress"><i class="fa fa-line-chart" aria-hidden="true"></i>{{el.progress}}%</span>
                        <span class="edit" @click="editJumpForm(el)"><i class="el-icon-edit-outline"></i></span>
                        <span class="tag" v-if="el.tag">{{el.tag}}</span>
                      </div>
                      <div class="task_second">
                        <span class="avatar" v-if="el.person_in_charge && el.person_in_charge.name">
                          {{el.person_in_charge && el.person_in_charge.name && el.person_in_charge.name.substring(el.person_in_charge.name.length-2,el.person_in_charge.name.length)}}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="addTask" @click="addTask(item)">
                    <i class="el-icon-plus"></i> &nbsp;添加任务
                  </div>
                  <div style="height:10px"></div>
                </template>
              </div>
              <div class="one-card">
                <div class="card_header"></div>
                <div class="addTask" @click="toNewCard" v-if="!isShowNewCard">
                  <i class="el-icon-plus"></i> &nbsp;新建卡片
                </div>
                <div class="new_card" v-else>
                  <div class="new_content">
                    <el-input placeholder="请输入卡片名称" size="small" v-model="card_name"></el-input>
                    <div class="card_btn">
                      <el-button size="mini" @click="closeCard">取消</el-button>
                      <el-button size="mini" type="primary" @click="toCreateCard">确定</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      class="user-select-control-dialog user-dialog"
      :append-to-body="true"
      :close-on-click-modal="false"
      :title="$t('user')"
      style="padding:0;" 
      :visible.sync="userDialog" 
      v-if="userDialog"
      :before-close="handleClose">
      <!-- <user_select 
        :field="field"
          singleOrDouble="selectOne"
        @seletEvent="setSeletedValue"
      /> -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="userDialog = false">取消</el-button>
        <el-button type="primary" size="medium" @click="onOk">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCardList,
  createCard,
  deleteCard,
  credateCardTask,
  cardTaskList,
  createProjectTemplate,
} from "@/api.js"
// import user_select from "@/expandedComponents/UserSelect/user_select.vue";
export default {  
  // inject:["addTab"],
  props:[
    "openParams",
  ],
  components: {
    // user_select
  },
  data() {
    return {
      activeName:'task',
      isShowNewCard : false, //新建卡片显示
      template_name:'',
      appName:'',
      cardData:[],
      isNoData: false,//无数据
      card_name:'',
      newCardName:'',//编辑卡片名字
      field:{
        selectMode:'selectOne',
        data: [],
        value:''
      },
      userDialog:false,
      selectedUsers:[],//选中的角色id
      selectedUsersList:[], //选中的角色数据列表
      subjectName:'',//任务名称
      description:'',//任务描述
      isRouterOpen: false, //路由
      routerParams:{}, //路由的openParams
      user:{},//当前用户
    };
  },
  created() {
    debugger
    console.log('123')
    if(!this.openParams) { //没有props参数，认定是路由打开
      this.isRouterOpen = true
      let queryData = this.$route.query
      let openParams = {
        appId: queryData.appId,
        linkType:queryData.linkType,
        magicAppName: queryData.magicAppName,
        name: queryData.name,
        project_template_id: queryData.project_template_id,
        refreshId: queryData.project_template_id,
        active: true,
        id:queryData.project_template_id,
        isEdit:queryData.isEdit == 'false' ? false : true,
        project_id:queryData.project_id ? queryData.project_id : ''
      }
      this.routerParams = openParams
    }else {
      this.routerParams = this.openParams
      this.routerParams.isEdit = true //默认true
    }
    this.template_name = this.routerParams.name
    this.appName = this.routerParams.magicAppName
    this.user = top.trunkVariable.user
    console.log(this.user,'user')
    this.toGetCardList()
  },
  mounted() {
    let that = this
    window.getUser = function(selectedUsers,selectedUsersList) {
      console.log('getUser')
      that.selectedUsers = selectedUsers
      that.selectedUsersList = selectedUsersList
      console.log('that.selectedUsers',that.selectedUsers)
    }
  },
  methods: {
    //返回
    back() {
      let params = {
        id: this.routerParams.id
      }
      top.obpmOAction('doBack',params)
      // this.$parent.doBack()
    },
    //编辑跳转进入表单
    editJumpForm(item) {
      console.log('tiaozhuang')
      let routerParams = this.routerParams
      let params = {
        appId: routerParams.appId,
        actionContent:item.formId,
        name: '',
        refreshId: routerParams.project_template_id,
        id: item.taskId,
        _select: item.taskId,
      }
      // this.addTab(params)
      // let params = {
      //   actionType:'opendocument',
      //   openType:'open-eject',
      //   formId: item.formId,
      //   appId: routerParams.appId,
      //   docId: item.taskId
      // }
      console.log(top,'top')
      top.obpmOAction('open-eject',params)
    },
    //更新项目名字
    updateName() {
      let data = {
        template_name:this.template_name,
        template_id: this.routerParams.project_template_id,
      }
      createProjectTemplate(
        this.appName,
        data,
        {
          onSucess: response => {
            if(response.data.errcode == 200) {
              this.$notify({
                title: '保存成功！',
                message: '',
                type: 'success'
              });
            }
          }
        }
      ) 
    },
    //获取卡片下的任务列表
    getcardTaskList(item) {
      let data = {
        project_template_id: this.routerParams.project_template_id, //项目模板id
        card_template_id: item.card_id, //卡片模板id
        project_id: this.routerParams.project_id ? this.routerParams.project_id : '',
      }
      cardTaskList(
        this.appName,
        data,
        {
          onSucess: response => {
            if(response.data.errcode == 200) {
              item.isAddTask = false
              item.taskList = response.data.datas
              this.$forceUpdate()
            }
          }
        }
      )
    },
    //卡片创建任务
    toCreateCardTask(item) {
      if(!this.subjectName) {
        this.$notify({
          title: '请先输入任务名称！',
          message: '',
          type: 'warning'
        });
      }else if(this.routerParams.project_id && !this.selectedUsers[0]) {
        this.$notify({
          title: '请先选择任务负责人！',
          message: '',
          type: 'warning'
        });
      }else {
        let data = {
          subject:  this.subjectName, //任务名称
          description:this.description,//
          founder:  this.user.id, //创建人id
          person_in_charge: this.selectedUsers[0], //负责人id
          card_template_id: item.card_id, //卡片模板id
          project_template_id: this.routerParams.project_template_id, //项目模板id
          project_id: this.routerParams.project_id ? this.routerParams.project_id : '',

          // task_id: ''//任务id
        }
        credateCardTask(
          this.appName,
          data,
          {
            onSucess: response => {
              if(response.data.errcode == 200) {
                this.isNoData = false
                this.getcardTaskList(item)
              }
            }
          }
        )
      }
    },
    selectUser() {
      let params = {
        id: this.routerParams.id
      }
      top.obpmOAction('user_select',params)
      // this.userDialog = true
    },
    setSeletedValue(users, usersLists){
      this.selectedUsers = users
      this.selectedUsersList = usersLists
    },
    handleClose() {
      this.userDialog = false
    },
    // getUser(selectedUsers,selectedUsersList) {
    //   this.selectedUsers = selectedUsers
    //   this.selectedUsersList = selectedUsersList
    // },
    //选中的角色显示在文本框中
    onOk(){
      if(this.selectedUsersList.length > 0) {
        this.field.data.push(this.selectedUsersList[0])
        this.field.value = this.selectedUsers[0]
      }else {
        this.field.data = []
        this.field.value = ''
      }
      this.userDialog = false
      

    },
    //取消添加任务
    closeAddTask(item) {
			item.isAddTask = false
			this.$forceUpdate()
    },
    //添加任务
    addTask(item) {
      this.cardData.forEach(item => item.isAddTask = false)
      item.isAddTask = true
      //清空用户选择框的数据
      this.field.data = []
      this.field.value = ''
      this.selectedUsers = []//选中的角色id
      this.selectedUsersList = [] //选中的角色数据列表
      this.subjectName = ''//任务名称
      this.$forceUpdate()
    },
    //删除卡片
    deleteCard(item) {
      let data = {
        project_template_id:this.routerParams.project_template_id,
        card_id:item.card_id,
      }
      deleteCard(
        this.appName,
        data,
        {
          onSucess: response => {
            if(response.data.errcode == 200) {
              this.isNoData = false
              this.toGetCardList()
            }
          }
        }
      )
    },
    //编辑卡片
    editCard(item) {
			this.cardData.forEach(item => item.isEdit = false)
			item.isEdit = true
      this.newCardName = item.card_name
      this.$forceUpdate()
    },
    //确认修改卡片名字
		confirmName(item){
      item.card_name = this.newCardName
			item.isEdit = false
      this.toCreateCard(item)
			this.$forceUpdate()
		},
    //取消修改卡片名字
    cancelName(item){
			item.isEdit = false
			this.$forceUpdate()
    },
    // 卡片保存
    toCreateCard(item) {
      let data = {
        card_name: item && item.card_name ? item.card_name : this.card_name,
        project_template_id:this.routerParams.project_template_id,
        card_id:item && item.card_id ? item.card_id : ''
      }
      createCard(
        this.appName,
        data,
        {
          onSucess: response => {
            if(response.data.errcode == 200) {
              this.isNoData = false
              this.isShowNewCard = false
              this.toGetCardList()
            }
          }
        }
      )
    },
    toNewCard() {
      this.card_name = ''
      this.isShowNewCard = true
    },
    closeCard() {
      this.isShowNewCard = false
    },
    //项目模板卡片列表
    toGetCardList() {
      let data = {
        project_template_id:this.routerParams.project_template_id,
        project_id: this.routerParams.project_id ? this.routerParams.project_id : '',
      }
      getCardList(
        this.appName,
        data,
        {
          onSucess: response => {
            if(response.data.datas) {
              this.cardData   = response.data.datas
              if(this.cardData.length == 0) {
                this.isNoData = true
                this.isShowNewCard = false
                this.card_name = ''
              }
            }
          }
        }
      )
    },
    handleClick() {

    },
  },
};
</script>
<style lang="scss">
@import "@/assets/style/task.scss";

</style>